<script type="text/x-template" id="jobmanager">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="搜索项1" >
                                    <el-input v-model="searchform.item1" placeholder="请输入搜索项1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项2" >
                                    <el-input v-model="searchform.item2" placeholder="请输入搜索项2"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项3" >
                                    <el-input v-model="searchform.item3" placeholder="请输入搜索项3"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary" @click="searchclick">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
<!--                <el-aside width="15%">-->
<!--                    侧边栏-->
<!--                </el-aside>-->
                <el-main>
                    <div style="padding-bottom: 10px">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-edit" @click="add">添加</el-button>
                            <el-button type="primary" icon="el-icon-share"  @click="share_drawer = true"></el-button>
                            <el-button type="primary" icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </div>
                    <template>
                        <el-table
                                :data="tableList"
                                stripe
                                @selection-change="handleSelectionChange"
                                style="width: 100%;min-height: 500px">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="jobname"
                                    :show-overflow-tooltip="true"
                                    label="任务名称"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="methodclazz"
                                    :show-overflow-tooltip="true"
                                    label="任务执行类"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="methodname"
                                    :show-overflow-tooltip="true"
                                    label="任务执行方法"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="statuName"
                                    width="200"
                                    label="任务状态">
                            </el-table-column>
                            <el-table-column
                                    prop="cron"
                                    :show-overflow-tooltip="true"
                                    label="任务执行时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="timetype"
                                    :show-overflow-tooltip="true"
                                    label="执行时间类型"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="createtime"
                                    width="200"
                                    label="创建时间">
                            </el-table-column>


                            <el-table-column
                                    label="操作"
                                    width="300">
                                <template slot-scope="scope">
                                    <el-button @click="updateJob(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button @click="executeOneJob(scope.row)" type="text" size="small">执行一次</el-button>
                                    <el-button @click="startJob(scope.row)" type="text" size="small">启动任务</el-button>
                                    <el-button @click="stopJob(scope.row)" type="text" size="small">暂停任务</el-button>
                                    <el-button type="text" @click="delete(scope.row.id)" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            layout="total,prev, pager, next"
                            :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>

        <el-drawer title="任务添加" :visible.sync="drawer_add" :with-header="true">
            <div>
                <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务名称" prop="jobname">
                                <el-input v-model="form.jobname"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="时间类型" prop="type">
                                <el-select v-model="form.timetype" placeholder="请选择">
                                    <el-option
                                            v-for="item in timetypes"
                                            :key="item.type"
                                            :label="item.typeName"
                                            :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="执行时间" prop="cron">
                                <el-input v-model="form.cron"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务类型" prop="type">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option
                                            v-for="item in jobtype"
                                            :key="item.status"
                                            :label="item.name"
                                            :value="item.status">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务class" prop="methodclazz">
                                <el-select v-model="form.methodclazz" placeholder="请选择执行的类">
                                    <el-option
                                            v-for="item in classlist"
                                            :key="item.clazz"
                                            :label="item.clazzName"
                                            :value="item.clazz">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务执行方法" prop="method">
                                <el-select v-model="form.methodname" placeholder="请选择执行的方法">
                                    <el-option
                                            v-for="item in methodlist"
                                            :key="item.method"
                                            :label="item.method"
                                            :value="item.method">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务备注" prop="cron">
                                <el-input v-model="form.note"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="demo-drawer__footer" style="padding: 10px">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submit_add_job('form')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>

        <el-drawer title="任务修改" :visible.sync="drawer_update" :with-header="true">
            <div>
                <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务名称" prop="jobname">
                                <el-input v-model="form.jobname"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="时间类型" prop="type">
                                <el-select v-model="form.timetype" placeholder="请选择">
                                    <el-option
                                            v-for="item in timetypes"
                                            :key="item.type"
                                            :label="item.typeName"
                                            :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="执行时间" prop="cron">
                                <el-input v-model="form.cron"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务类型" prop="type">
                                <el-select v-model="form.type" placeholder="请选择">
                                    <el-option
                                            v-for="item in jobtype"
                                            :key="item.status"
                                            :label="item.name"
                                            :value="item.status">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务class" prop="methodclazz">
                                <el-select v-model="form.methodclazz" placeholder="请选择执行的类">
                                    <el-option
                                            v-for="item in classlist"
                                            :key="item.clazz"
                                            :label="item.clazzName"
                                            :value="item.clazz">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务执行方法" prop="method">
                                <el-select v-model="form.methodname" placeholder="请选择执行的方法">
                                    <el-option
                                            v-for="item in methodlist"
                                            :key="item.method"
                                            :label="item.method"
                                            :value="item.method">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="22">
                            <el-form-item label="任务备注" prop="note">
                                <el-input v-model="form.note"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="demo-drawer__footer" style="padding: 10px">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submit_update_job('form')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>



        <!-- 添加面板        -->
        <el-dialog title="添加面板" :visible.sync="dialogFormVisible_add">
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_add = false">取 消</el-button>
                <el-button type="primary" @click="submit_add">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑面板        -->
        <el-dialog title="编辑面板" :visible.sync="dialogFormVisible_update">
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_update = false">取 消</el-button>
                <el-button type="primary" @click="submit_update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</script>
<script>
    let jobmanager={
        data() {
            var checkMethodclazz=(rule,value,callback)=>{
                  this.isClass=true;
                  this.isMethod=true;
                  callback();
            };
            var checkClazz = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('class不能为空'));
                }
                setTimeout(() => {
                    this.getClazz();
                    if(this.isclazz){
                        this.getMethods();
                        callback();
                    }else {
                        callback(new Error('输入的class不存在'));
                    }
                }, 1000);
            };
            return {
                drawer_update:false,
                isClass:false,
                isMethod:false,
                timetypes:[],
                counter:0,
                classinput:true,
                classlist:[],
                methodlist:[],
                isclazz:false,
                jobtype:[],
                drawer_add:false, //任务添加
                form:{}, //表单数据
                form_rules: {
                    groupName:[
                        {required: true, message: '请输入分组名称', trigger: 'blur'},
                    ],
                    jobname: [
                        {required: true, message: '请输入任务名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    cron: [
                        {required: true, message: '请输入执行时间', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    methodclazz:[
                        { validator: checkMethodclazz, trigger: 'change' }
                    ],
                    type:[
                        {required: true, message: '请选择执行方法', trigger: 'blur'},
                    ],
                    note: [
                        {required: true, message: '请输入任务备注', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ],
                }, // 表单校验
                share_drawer:false,//抽屉
                dialogFormVisible_add:false, //添加面板
                dialogFormVisible_update:false, //编辑面板
                activeIndex2: '1', //导航默认选中
                searchform:{

                },
                tableList:[], //表格数据
                total:0, // 条数
                size:10,
                multipleSelection:[], //多选
                cancelForm() {
                    this.loading = false;
                    this.dialog = false;
                    clearTimeout(this.timer);
                },
                pageNum:0,
                loading: false,
            }
        },
        mounted() {
            this.timer = setInterval(() => {
                if(this.form.methodclazz && this.isClass){
                    this.getClazz();
                }
                if(this.isMethod){
                    this.getMethods();
                }
            }, 1000);
        },
        created(){
            this.getlist(1)
            this.getjobtype();
            this.getClasss();
            this.gettimetypes();
        },
        template: '#jobmanager',
        methods: {
            executeOneJob(val){
               api.POST('/job/execute',{'id':val.id},(result)=>{
                   if(result.code===0){
                       this.$message({
                           showClose: true,
                           message: result.msg,
                           type: 'success'
                       });
                   }else{
                       this.$message.error(result.msg);
                   }
               })
            },
            startJob(val){
               api.GET('/job/start',{'id':val.id},(result)=>{
                   if(result.code===0){
                       this.$message({
                           showClose: true,
                           message: result.msg,
                           type: 'success'
                       });
                       this.getlist(this.pageNum)
                   }else {
                       this.$message.error(result.msg);
                   }
               })
            },
            stopJob(val){
                api.GET('/job/stop',{'id':val.id},(result)=>{
                    if(result.code===0){
                        this.$message({
                            showClose: true,
                            message: result.msg,
                            type: 'success'
                        });
                        this.getlist(this.pageNum)
                    }else {
                        this.$message.error(result.msg);
                    }
                })
            },
            //任务确认更新
            submit_update_job(form){
                api.POST('/job/update',this.form,(result)=>{
                    if(result.code === 0){
                        this.$message({
                            showClose: true,
                            message: result.msg,
                            type: 'success'
                        });
                        this.getlist(this.pageNum);
                        this.drawer_update=false;
                    }else {
                        this.$message.error(res.msg);

                    }
                })
            },
            //更新任务
            updateJob(val){
                this.getOne(val.id);
                this.drawer_update=true;
            },
            //获取一个
            getOne(id){
                api.GET('/job/getjob',{'id':id},(result)=>{
                    if(result.code===0){
                        this.form=result.data;
                    }
                })
            },
            gettimetypes(){
              api.GET('/job/getjobtimetype',null,(res)=>{
                  if(res.code===0){
                      this.timetypes=res.data;
                  }
              })
            },
            submit_add_job(form){
                this.isAdd=false;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        api.POST('/job/add',this.form,(res)=>{
                            if(res.code === 0){
                                this.$message({
                                    showClose: true,
                                    message: res.msg,
                                    type: 'success'
                                });
                            }else {
                                this.$message.error(res.msg);
                                this.drawer_add=false;
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            getClasss(){
              api.GET('/job/getjoblist',null,(res)=>{
                  if(res.code===0){
                      this.classlist=res.data;
                  }
              })
            },
            getMethods(){
                api.GET('/job/getclassmethod',{'clazzName':this.form.methodclazz},(res)=>{
                    if(res.code===0){
                        this.methodlist=res.data;
                        this.isMethod=false;
                    }
                })
            },
            getClazz(){
              api.GET('/job/getclassexist',{'clazz':this.form.methodclazz},(res)=>{
                    if(res.code===0){
                        this.isclazz=res.data;
                        if(res.data){
                            this.isClass=false;
                        }
                    }
              })
            },
            //获取任务类型
            getjobtype(){
              api.GET('/job/getjobtype',null,(res)=>{
                  if(res.code===0){
                      this.jobtype=res.data
                  }
              })
            },
            //搜索点击
            searchclick(){
                this.getlist(this.pageNum);
            },
            //分页点击
            handleCurrentChange(val){
                this.pageNum=val;
                this.getlist(this.pageNum);
            },
            //打开更新
            update(val){
                this.dialogFormVisible_update=true;
            },
            //确认更新
            submit_update(){
                this.$message({
                    showClose: true,
                    message: '确认更新成功',
                    type: 'success'
                });
                this.dialogFormVisible_update=false;
            },
            //添加
            add(){
                this.form={};
                this.form.select='1'
                this.drawer_add=true;
                this.isAdd=true;
               // this.dialogFormVisible_add=true;
            },
            //添加确定
            submit_add(){
                this.$message({
                    showClose: true,
                    message: '确认添加成功',
                    type: 'success'
                });
                this.dialogFormVisible_add=false;
            },
            //删除
            delete(val){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/deleteurl',{'id':val},(result)=> {
                        if(result.code==0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            local.reload();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getlist(val){
                this.searchform.pageNum=val;
                this.searchform.pageSize=this.size;
                api.GET('/job/page',this.searchform,(res)=>{
                    if(res.code===0){
                        this.tableList=res.data.records;
                        this.total=res.data.total;
                    }else {
                        this.$message.error(res.msg);
                    }

                })
            },
            //多选
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            locationfref(href){
                window.open(href);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

        }
    }
    Vue.component('jobmanager',jobmanager);
</script>